<template>
<!--  <div style="width: 770px;height: 900px; margin: 0px 0px 0px 200px">-->
    <div style="width: 1000px;height: auto; margin: 20px auto">

      <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 30px 0px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>收藏的资讯</el-breadcrumb-item>
        <!--        <el-breadcrumb-item>{{newsDetail.title }}</el-breadcrumb-item>-->
      </el-breadcrumb>
    <div v-for="p in newsList">
      <el-card style="padding: 12px 0px;margin: 20px 0px;height: 130px">

          <p style="color: #333333; font-size: 18px ;margin: 0px ;padding: 0px">
            <a :href="'/newsDetail?newsDetailId='+p.id">
            {{p.title}}</a>
          </p><br>
          <p class="truncate"   style="color: #999999; font-size: 14px  ;margin: 0px ;padding: 0px;border: 1px white solid ;
            " :title="p.title">{{p.content}}</p>

          <span style="float: right">
            <el-button type="warning" icon="el-icon-star-off"
                       size="mini" circle @click="handleCancelCollection(p)"></el-button>
            发布时间:{{p.publishTime}}</span>
      </el-card>
    </div>

      <div style="text-align: right; margin: 10px auto;">
        <el-pagination
            @current-change="changePage"
            layout="total, prev, pager, next"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize">
        </el-pagination>
      </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      newsList:{},
      loginUser:{},
      total: 0,
      pageSize: 0,
      currentPage: 1,
    };
  },
  methods: {

    handleCancelCollection(news) {
      this.$confirm('此操作将取消收藏【' + news.id + '-' + news.title + '】房源，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(news);
      }).catch(() => {
      });
    },

    handleDelete(news) {
      let url = 'http://localhost:9200/user/delete-news-collection';

      let formData = 'newsDetailId=' + news.id;

      this.axios.post(url, formData).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '取消收藏成功！',
            type: 'success'
          });
          this.loadNewsCategoryList();
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadNewsCategoryList();
            }
          });
        } else if (jsonResult.state == 40900) {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },

    changePage(value) {
      this.$router.replace('?page=' + value);
      this.loadNewsCategoryList();
    },
    // loadNewsList() {
    //   let newsCategoryId = this.$router.currentRoute.query.newsCategoryId;
    //   // let newsCategoryId = this.$route.params.newsCategoryId;
    //   let url = 'http://localhost:9200/news-category/list/cha?id='+newsCategoryId;
    //   this.axios.get(url).then((response) => {
    //     let jsonResult = response.data;
    //     if (jsonResult.state == 20000) {
    //       this.newsList = jsonResult.data;
    //     } else {
    //       this.$message.error(jsonResult.message);
    //     }
    //   })
    // },
    loadNewsCategoryList() {
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      let url = 'http://localhost:9200/news-category/list/shoucang?page=' + page;
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.newsList = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    }
  },
  mounted() {
    this.loadNewsCategoryList()
  }
}
</script>
<style>
element.style {
  width: auto;
  height: auto;
  margin: 0px !important;
}

.midall{
  margin: 0 auto;width: 980px;height:900px;border: 0px red solid;
}
.midleft{
width: 680px;height:900px;border: 0px green solid;text-align: left;display: inline-block;float: left;
}
.title{
text-align: center;padding-bottom: 10px;
}
.leftP{
  text-indent: 2em;margin-top: 30px; line-height: 30px;font-size: 20px;
}
.pic{
  text-align: center;padding:40px;overflow: hidden;
}

a {
  color: #333333;
}
a:hover{
  color: #00b4aa;
}
a:active{
  color: yellow;
}

.truncate {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate::after {
  content: "...";
}

.truncate[data-truncate] {
  max-height: calc(1em * 20);
  overflow: hidden;
}

.truncate {
  position: relative;
}



</style>

